<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ mid ? '修改' : '新增' }}仓库</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>仓库名称：</span>
          <div :class="{'error_border':tip_num===1}">
            <el-input type="text" placeholder="仓库名称" v-model.trim="menuName" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>仓库地址：</span>
          <div :class="{'error_border':tip_num===2}">
            <el-input type="text" placeholder="仓库地址" v-model.trim="address" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab">仓库联系电话：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input type="text" placeholder="仓库联系电话" v-model.trim="phone" @input="setTip('','')" ></el-input>
          </div>
        </div>
<!--        <div class="line" v-if="mid">-->
<!--          <span class="lab">状态：</span>-->
<!--          <div>-->
<!--            <el-radio-group v-model="proStatus" @change="setTip('','')">-->
<!--              <el-radio :label="1">可用</el-radio>-->
<!--              <el-radio :label="0">禁用</el-radio>-->
<!--            </el-radio-group>-->
<!--          </div>-->
<!--        </div>-->
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getWarehouseDetail,addWarehouse,updateWarehouse} from "@/api/basic/warehouse";
import commons from "@/utils/common";

export default {
  props: ['mid'],
  data() {
    return {
      menuName: '',
      address:'',
      phone:'',
      lat:'',
      lng:'',
      parentMenu: [],
      proStatus: 1,
      infoTip: '',
      tip_num: '',
      loading: false
    }
  },
  mounted() {
    if (this.mid) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      let that=this;
      this.loading = true;
      getWarehouseDetail(this.mid).then(res => {
        that.setData(res);
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },


    setData(obj) {
      this.menuName = obj.name;
      this.address = obj.address;
      this.proStatus = obj.enable ? obj.enable : 0;
      this.phone = obj.phone;
      this.lat = obj.lat ? obj.lat : '';
      this.lng = obj.lng ? obj.lng : '';
    },

    // 确认编辑
    confirmEdit() {
      if (this.menuName === '') {
        this.setTip(1, '请输入仓库名称！');
      } else if (this.address === '') {
        this.setTip(2, '请输入仓库地址！');
      } else if (this.phone!==''&& (!commons.judgePhone(this.phone))) {
        this.setTip(3, '请输入正确的仓库联系电话！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let data = {
        // enable: that.proStatus,
        name: that.menuName,
        address:that.address,
        phone:that.phone
      };
      if (that.mid) {
        data.id = that.mid;
        updateWarehouse(data).then(res => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
        }).catch((e) => {
          that.loading = false;
        });
      }else {
        addWarehouse(data).then(res => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setTip(num, text) {
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #60BAE7;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #DCDFE6;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
}

.avatar {
  max-width: 210px;
  min-width: 60px;
  height: 100px;
  display: block;
  border-radius: 6px;
  margin-right: 15px;
  border: 1px solid #bbb;
}
</style>
